//HomeView.vue
<script setup>
  import { ref, computed, onMounted } from 'vue';
  import { getPieChart1 } from '@/api/api'
  import { useRoute } from 'vue-router'
  const route = useRoute()
  onMounted( () => {
    getInit()
  })

  const getInit = () => {
    const { params } = route
    getPieChart1({
      job_id: params.id
    }).then(res => {
      data.value = res.data
    })
  }
//模拟数据value的字段对应Y轴，name字段对应X轴
const data = ref([])
 
const option = computed(()=>{
  return{
    title:{
      text: '面试任务状态分布', 
      left: 'center',
      top: 'bottom',
      textStyle: {
        fontSize: 14,
      }
    },
    tooltip: {
      trigger: 'item',
      formatter:  '{b}: {c}人'
    },
    legend: {
      top: '5%',
      left: 'center'
    }, 
    color: ['#cd2424','#FFC857 ', '#186e30', ],
    series:[
      {
        name: '',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        padAngle: 5,
        itemStyle: {
          borderRadius: 10
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 20,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data:data.value
      }
    ]
  }
})
</script>
 
<template>
  <e-charts class="chart" :option="option" />
</template>
 
<style>
.chart{
  height: 350px;
}
</style>